<template>
   <div class="wrapper">
        <swiper :options="swiperOptions" v-if="swiperList.length">
    <swiper-slide v-for="i of swiperList" :key="i.id">
        <img class="swiper-img" :src="i.imgUrl" alt="" />
    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
   </div>
</template>
<script>
export default {
    name:'HomeSwiper',
    data(){
        return{
            swiperOptions:{
                pagination:'.swiper-pagination'
            },
            swiperList:[
                {
                    id:'1',
                    imgUrl:require('@/assets/images/spsx.png')
                },{
                    id:'2',
                    imgUrl:require('@/assets/images/mjfw.png')
                }
            ]
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.wrapper >>> .swiper-pagination-bullet-active
    background $bgColor
.swiper-img 
    width 100%
.wrapper
  overflow hidden
  width 100%
  height 0
  padding-bottom 47.25%
  background #eee
  .swiper-img
    width 100%
</style>